<template>
  <div class="uni-field-select">
    <el-select v-model="selVal" v-bind="OriProps" placeholder="请选择..." filterable clearable @change="changeEvent">
      <el-option v-for="(item,index) in options" :key="index" :label="item.displayName" :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>
<script>

/**
 * 1、数据库审计 - 选择字段类型组件
 */

export default {
  name: 'uni-field-select',
  props: {
    /**
     * 双向绑定
     */
    value: {
      type: String,
      default () {
        return ''
      }
    },
    /**
     * 初始化 dataForm 的值
     */
    initParams: {
      type: Object,
      default () {
        return {}
      }
    },
    /**
     * 初始化 options 的值
     */
    data: {
      require: false,
      type: Array
    },
    /**
     * el-select 原生属性支持
     */
    OriProps: {
      type: Object,
      default () {
        return {}
      }
    },
    backFun: {
      require: false,
      type: Function
    }
  },
  data () {
    return {
      selVal: '',
      options: [],
      dataForm: {
        dbType: ''
      }
    }
  },
  watch: {},
  created () {
    // init
    this.selVal = this.value
    this.dataForm = {
      ...this.dataForm,
      ...this.initParams
    }
    if (this.data) {
      this.options = this.data
    } else {
      this.getList()
    }
  },
  beforeMount () { },
  mounted () { },
  methods: {
    changeEvent (val) {
      this.$emit('input', val)
      if (this.backFun != null) {
        this.backFun(this.getItem(this.options, val, 'id'))
      }
    },
    getItem (data, value, fieldName = 'val') {
      let keyData = data.filter(item => (item[fieldName] || '').toString() === (value || '').toString())[0]
      if (keyData) {
        return keyData
      }
      return {}
    },
    makeOptions () {
      return this.$http.get('/dpd/dpdColumnType/list', { params: this.dataForm })
    },
    getList () {
      this.makeOptions().then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.options = res.data
      })
    }
  }
}
</script>

<style>
</style>
